<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
      <div v-if="books.length>0">
     <table> 
      <thead>
        <tr>
          <th>
        序号
        </th>
        <th width="200px">
        书籍
        </th> 
        <th>
        出版日期
        </th> 
        <th>
        价格
        </th> 
        <th>
        购买数量
        </th>
        <th>
        操作
        </th>
      </tr>
      </thead>
      <tbody>
<tr v-for="(book,index) in books" :key="book.id" :class="{active:index==currentIndex}" @click="currentIndex=index">
  <td>{{book.id}}</td>
  <td>{{book.name}}</td>
  <td>{{book.date}}</td>
  <td>{{'￥'+book.price}}</td>
  <td><button @click="book.count>1?book.count--:book.count=1">-1</button>{{" "+book.count+" "}}<button @click="book.count++">+1</button></td>
  <td><button @click="books.splice(index,1)">移除</button></td>
</tr>
      </tbody>
     </table>
     <h2>总价:￥{{totalPrice}}</h2>
    </div>
    <div v-else="">
   <h1>购物车为空</h1>
    </div>
    </template>
    <script src="../lib/js/vue.js"></script>
  <script src="./books.js"></script>
  <script>
    const app=Vue.createApp({
      template:'#my-app',
      data(){
        return{
          books:books,
        currentIndex:0,
        }
      },
       computed:{
       totalPrice(){
       var total=0
        this.books.forEach(function(e){
           total+=e.count*e.price
        }
        )
        return total
       
       }
       }
    })
    app.mount("#app")
  </script>
</body>
</html>